A Waterfall chart with Grow effect

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.waterfall.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var waterfall = new RGraph.Waterfall({
            id: 'cvs',
            data: [50,12,-50,-19, -130, -30],
            options: {
                backgroundGridAutofitNumhlines: 5,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                title: 'A chart showing income/expenditure',
                titleY: 10,
                colors: ['black','red','blue'],
                strokestyle: 'white',
                unitsPre: '$',
                total: true,
                labels: ['Sales', 'Misc', 'Wages','Fees','Supplies','Food','Gross'],
                tooltips: [
                    'Total sales of product and services rendered',
                    'Miscellaneous income',
                    'Wages provided to the staff',
                    'Fees (eg bank, transaction)',
                    'Supplies to the office and daily running costs',
                    'Food to keep the staff alive and running at peak efficiency',
                    'Gross income before any taxes have been paid'
                ],
                highlightStroke: 'rgba(0,0,0,0)',
                
                // In older versions of Firefox this seriously slows down the Grow animation
                shadow: !RGraph.ISFF,

                shadowColor: '#aaa',
                shadowBlur: 5,
                shadowOffsetx: 0,
                shadowOffsety: 0,
                gutterLeft: 70,
                textSize: 12,
                xaxispos: 'center',
                
            }
        }).grow();
    };
</script>